<template>
  <el-row class="page">
    <el-col :span="3">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        :default-active="defaultPath"
        text-color="#fff"
        router
      >
        <el-menu-item :index="item.path" v-for="(item,index) in menus" :key="index">
          <span>{{item.title}}</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="21" >
      <div class="container">
        <router-view />
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const menus = [
  {
    path: 'base01',
    title: '基础表单'
  },
  {
    path: 'base02',
    title: '选择框添加options'
  },
  {
    path: 'base03',
    title: '动态显示与隐藏'
  },
  {
    path: 'base04',
    title: '修改配置'
  },
  {
    path: 'base05',
    title: '自定义功能'
  },
]
const defaultPath = computed(() => menus.find(item => route.path.endsWith(item.path))?.path,
)
</script>
<style>
  .page {
    padding: 20px;
  }
  .container {
    margin: 20px;
    padding: 20px;
    box-shadow: 0px 0px 20px 0px rgba(5, 28, 44, 0.1);
  }
</style>
